import React from 'react';
import styles from './style';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  FlatList,
  Dimensions,
} from 'react-native';
import * as Animatable from 'react-native-animatable';

const img1 = require('../../img/imgContent1.png')
const img2 = require('../../img/imgContent2.png');
const img3 = require('../../img/imgContent3.png');
const down = require('../../img/down.png');

const windowWidth = Dimensions.get('window').width;
export default class ListImg extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: '1',
          src: img1,
          name: '咖啡生活',
          dis: 'Website',
          num: 698,
        },
        {
          id: '2',
          src: img2,
          name: '黑板',
          dis: 'Website Back',
          num: 698,
        },
        {
          id: '3',
          src: img3,
          name: '不知道',
          dis: 'Website',
          num: 698,
        },
        {
          id: '4',
          src: img2,
          name: '黑板',
          dis: 'Website Back',
          num: 698,
        },
        {
          id: '5',
          src: img1,
          name: '咖啡生活',
          dis: 'Website',
          num: 698,
        },
        {
          id: '6',
          src: img2,
          name: '黑板',
          dis: 'Website Back',
          num: 698,
        },
        {
          id: '7',
          src: img3,
          name: '不知道',
          dis: 'Website',
          num: 698,
        },
        {
          id: '8',
          src: img2,
          name: '黑板',
          dis: 'Website Back',
          num: 698,
        },
      ],
    };
  }
  render() {
    let {navigation,selfStatus} = this.props;
    let {list} = this.state;
    let iW = windowWidth / 2 - 30;
    const renderItem = ({item}) => {
      return (
        <>
          <Animatable.View style={styles.imgText} animation="slideInUp">
            <TouchableOpacity
              onPress={() =>
                navigation.navigate('FindDetail', {img: item.src,status:selfStatus})
              }>
              <Image
                source={item.src}
                style={[{width: iW, height: iW}]}></Image>
            </TouchableOpacity>
            <View style={styles.titleStyle}>
              <Text style={styles.leftStyle}>{item.name}</Text>
              <View style={[{width: 50, flexDirection: 'row'}]}>
                <Image source={down} style={styles.imgStyle}></Image>
                <Text style={styles.rightBottomTextStyle}>{item.num}</Text>
              </View>
            </View>
            <View style={styles.titleStyle}>
              <Text
                style={[styles.leftStyle, styles.bottomStyle]}
                numberOfLines={1}>
                {item.dis}
              </Text>
            </View>
          </Animatable.View>
        </>
      );
    };
    return (
      <FlatList
        data={list}
        renderItem={renderItem}
        numColumns={2}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      />
    );
  }
}
